<template>
	<view class='commonHead'>
		<view class='pageHead' :style="{ 'height':pageTitle+'px', }">
			<view class='statusBar' :style='{ "background":"white", "height":statusBar+"px" }'></view>
			<view class='head dFlex jBetween_aCenter'>
				<view class='logo imgPublic'>
					<image src="/static/images/logo@2x.png" mode="widthFix"></image>
				</view>
				<view class='pageTit dFlex jCenter_aCenter'>
					<image src="/static/images/Live 4D Result@2x.png" mode="widthFix"></image>
				</view>
				<view class='tools dFlex jEnd_aCenter'>
					<view class='toolOne imgPublic'>
						<image src="/static/images/rili@2x.png" mode="widthFix"></image>
					</view>
					<view class='toolOne imgPublic'>
						<image src="/static/images/shuaxin@2x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class='kindList' :class='{expand:menuExpand}'>
			<u-grid :border="true" :col='5' >
				<u-grid-item v-for="(baseListItem,baseListIndex) in showBaseList" :key="baseListIndex" >
					<text class="grid-text">{{baseListItem.name}}</text>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<view class='exchangeBtn' @click='menuExpand = !menuExpand'>{{menuExpand ? $t('score.retract') : $t('score.expand')}}</view>
		</view>
		<view class='dateTongJi dFlex jBetween_aCenter'>
			<view class='dateOne active'>
				<view class='showDate'>02/03/2025(SUN)</view>
				<view class='dateCount'>5934/25</view>
			</view>
			<view class='dateOne'>
				<view class='showDate'>02/03/2025(SUN)</view>
				<view class='dateCount'>5934/25</view>
			</view>
			<view class='dateOne'>
				<view class='showDate'>02/03/2025(SUN)</view>
				<view class='dateCount'>5934/25</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar:getApp().globalData.statusBar,
				pageTitle:getApp().globalData.pageTitle,
				showBaseList:[],
				baseList: [
					{name: 'photo',title: '图片'},
					{name: 'lock',title: '锁头'},
					{name: 'star',title: '星星'},
					{name: 'photo',title: '图片'},
					{name: 'lock',title: '锁头'},
					{name: 'star',title: '星星'},
					{name: 'photo',title: '图片'},
					{name: 'lock',title: '锁头'},
					{name: 'star',title: '星星'},
					{name: 'photo',title: '图片'},
					{name: 'lock',title: '锁头'},
					{name: 'star',title: '星星'},
					{name: 'photo',title: '图片'},
					{name: 'lock',title: '锁头'},
				],
				menuExpand:true,
			};
		},
		watch:{
			menuExpand(val){
				var list = JSON.parse(JSON.stringify(this.baseList));
				if(val){
					this.showBaseList = list;
					this.$parent.pageTitle = getApp().globalData.pageTitle + 137;
				}else{
					this.showBaseList = list.splice(0,5);
					this.$parent.pageTitle = getApp().globalData.pageTitle + 228;
				}
			}
		},
		mounted(){
			this.showBaseList = JSON.parse(JSON.stringify(this.baseList));
		},
	}
</script>

<style lang="scss">
	.kindList{
		.exchangeBtn{
			width:100%;
			text-align: center;
			border-top:1px solid white;
			padding:10px 0;
		}
		color: white;
		background: linear-gradient(0deg,#290bad 0%, #9b01a1 100%), #520065;
	}
	.dateTongJi{
		.dateOne{
			font-size: 12px;
			color:#333333;
			font-weight: bold;
			text-align: center;
		}
		.dateOne.active{
			color: #9102A2;
		}
		width:100%;
		padding:8px 12px;
		line-height: 20px;
		box-sizing: border-box;
	}
	.pageHead{
		.head{
			.pageTit{
				width: 180px;
				flex:unset;
			}
			.tools{
				.toolOne{
					width:20px;
					margin-left:12px;
				}
				width:max-content;
			}
			.logo{
				width: 60px;
			}
		}
		position: relative;
		background: #F6F6F6;
	}
	.commonHead{
		/* position: fixed;
		top: 0;
		left: 0;
		z-index: 10; */
		background:white;
		width:100%;
	}
</style>
